<template>
  <div id="app">
    <transition>
      <router-view />
    </transition>
    <Footer v-show="$route.meta.showFooter"/>
  </div>
</template>
<script>
import Footer from './components/Footer.vue'
import '../static/reset.styl';
export default {
   components:{
        Footer
   },
   data() {
     return {
       screenWidth:document.body.clientWidth
     }
   },
   mounted () { 
     // 异步获取address  
     this.$store.dispatch('getAddress')
     window.onresize=()=>{
       return (()=>{
          window.screenWidth = document.body.clientWidth
          this.screenWidth = window.screenWidth
       })()
     }
    },
    watch: {
      screenWidth(val){
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if(!this.timer){
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidt
          this.screenWidth = val
          this.timer = true
          let that = this
          setTimeout(function(){
            // 打印screenWidth变化的值
            that.timer = false
          },400)
        }
        this.$router.go(0)
      }
    },
    methods: {
      
    },
}
document.addEventListener('DOMContentLoaded',()=>{
  const html = document.querySelector('html');
  let fontSize = window.innerWidth / 20;
  fontSize = fontSize > 50 ? 50:fontSize;
  html.style.fontSize = fontSize + 'px';
})
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-enter
    opacity 0
    transform translateX(100%) 
  .v-leave-to
    opacity 0
    transform translateX(-100%) 
    position absolute
  .v-enter-active,
  .v-leave-active 
    transition all 0.2s ease 
   
</style>

